<template>
  <div class="courseLiveBox">
    <!-- 左侧课程列表显示区域 -->
    <div class="course_title">
      <div class="course_title_left">{{ list[leftIndex].title }}</div>
      <!--<div class="course_title_right">-->
      <!--<span>查看更多</span>-->
      <!--<i class="el-icon-arrow-right"></i>-->
      <!--</div>-->
    </div>
    <div class="courseListBox">
      <div v-for="(item,index) in list[leftIndex].courseList" :key="index" class="courseList">
        <div class="course_img">
          <img :src="list[leftIndex].courseList[index].url"/>
          <div class="teacherBox">
            <div class="teacherName">{{ list[leftIndex].courseList[index].teacher }}</div>
            <!--<img src="../../../../assets/subjectImg.png" alt class="teacherImg"/>-->
          </div>
          <div class="status-box">
            <div
              :class="list[leftIndex].courseList[index].liveStatus==='live'?'live':list[leftIndex].courseList[index].liveStatus==='liveOpen'?'liveOpen':'playback'"
              class="left"
            >
              <img
                v-if="list[leftIndex].courseList[index].liveStatus==='live'"
                src="../../../../assets/property/live.png"
                alt
                class="left-status-img"
              />
              <img
                v-if="list[leftIndex].courseList[index].liveStatus==='open'"
                src="../../../../assets/property/unlive.png"
                alt
                class="left-status-img"
              />
              <img
                v-if="list[leftIndex].courseList[index].liveStatus==='liveOpen'"
                src="../../../../assets/property/playback.png"
                alt
                class="left-status-img"
              />
              <div
                class="status-hint"
              >{{ list[leftIndex].courseList[index].liveStatus==='live'?'直播':list[leftIndex].courseList[index].liveStatus==='normal'?'直播':'普通'}}
              </div>
            </div>
            <div class="right">
              <div>{{ list[leftIndex].courseList[index].studentNum }}人在学习</div>
            </div>
          </div>
        </div>
        <div class="course_con">
          <div class="course_con_title">{{ list[leftIndex].courseList[index].title }}</div>
          <div class="course_con_bottom">
            <!--<span>{{ list[leftIndex].courseList[index].hour }}/</span>-->
            <span>{{ list[leftIndex].courseList[index].money }} 元</span>
            <!--<span>会员免费</span>-->
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧课程编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightList">
        <!-- 头部提示区域 -->
        <header class="title">课程列表设置</header>
        <div class="editCon">
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">列表标题：</span>
            <el-input v-model="list[leftIndex].title" style="width:200px;"></el-input>
          </div>
          <div style="margin-top:20px;display: flex;align-items:center;">
            <span style="width:95px;text-align:right;display: inline-block;">选择分类：</span>
            <treeselect v-model="list[leftIndex].courseType" :multiple="false" :options="courseCategorys" @change="courseType($event)" style="width:200px;margin-left: 5px;"/>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">发布时间：</span>
            <el-input v-model="list[leftIndex].recentDay" style="width:200px;" @change="recentDay($event)"></el-input>
<!--            <el-select v-model="list[leftIndex].recentDay" placeholder="请选择" style="width:200px;" @change="recentDay($event)" value="">-->
<!--              <el-option-->
<!--                v-for="item in dayOptions"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--              />-->
<!--            </el-select>-->
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">展示条数：</span>
            <el-input v-model="list[leftIndex].limit" style="width:200px;" @change="recentDay($event)"></el-input>
<!--            <el-select v-model="list[leftIndex].limit" placeholder="请选择" style="width:200px;" @change="limitNumber($event)" value="">-->
<!--              <el-option-->
<!--                v-for="item in selectOptions"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--              />-->
<!--            </el-select>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {courseList} from '@/api/user/user' // 数据接口
  import {getCategoryList} from '@/api/subject/category'
  import {getTenantId} from "@/utils/auth"

  export default {
    components: {Treeselect},
    props: ['list', 'leftIndex'],
    data() {
      return {
        courseCategorys: [],
        rightIndex: 0,
        categoryId: "",
        EduUserVo: {},
        fileList: [],
        keyWord: '',
        courseDialogVisible: false,
        classDialogVisible: false,
        dayValue: '',
        limitValue: '',
        logofile: '',
        linkTableData: [{name: 'class NO.1', price: '2', number: '2', createTime: '2'}],
        dayOptions: [{value: '3', label: '最近3天'}, {value: '7', label: '最近7天'}, {value: '15', label: '最近15天'}, {value: '30', label: '最近30天'}],
        cascaderOptions: [],
        selectOptions: [{value: '1', label: '1'}, {value: '2', label: '2'}, {value: '3', label: '3'}, {value: '4', label: '4'}, {value: '5', label: '5'}]
      }
    },
    mounted() {
      this.getCourseCategorys()
    },
    methods: {
      getCourseCategorys() {
        getCategoryList('course', getTenantId(),'0').then(response => {
          this.courseCategorys = response.data.items
        }).catch(() => {
        })
      },
      getCourseList() {
        this.EduUserVo.tenantId = getTenantId();
        this.EduUserVo.categoryId = this.list[this.leftIndex].courseType;
        this.EduUserVo.limit = this.list[this.leftIndex].limit;
        this.EduUserVo.day = this.list[this.leftIndex].recentDay;
        courseList(this.EduUserVo).then(response => {
          this.list[this.leftIndex].courseList = response.data.items
          this.list[this.leftIndex].courseList.map(i => {
            i.url = i.largePicture;
            i.liveStatus = i.status;
            i.teacher = i.userName;
            i.money = i.price;
          })
        }).catch(() => {
        })
      },
      courseType(item) {
        this.list[this.leftIndex].courseType = item[item.length - 1]
        this.getCourseList()
      },
      recentDay() {
        this.getCourseList()
      },
      limitNumber() {
        this.getCourseList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .courseLiveBox {
    .course_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;

      .course_title_left {
        font-size: 16px;
        font-weight: bold;
      }

      .course_title_right {
        font-size: 12px;
        color: #616161;
      }
    }

    .courseListBox {
      width: 100%;
      height: 200px;
      display: flex;
      overflow: auto;
      padding: 10px;

      .courseList {
        width: 48%;
        margin-right: 5px;
        flex-shrink: 0;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 4px 10px #eee;

        .course_img {
          width: 100%;
          height: 100px;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }

          .teacherBox {
            position: absolute;
            display: flex;
            align-items: center;
            left: 0px;
            top: 10px;

            .teacherName {
              text-align: center;
              color: #fff;
              background-color: #c6aa88;
              width: 60px;
              height: 20px;
              line-height: 20px;
            }

            .teacherImg {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              border: 1px solid #fff;
              margin-left: -3px;
            }
          }

          .status-box {
            position: absolute;
            display: flex;
            align-items: center;
            left: 4px;
            bottom: 4px;

            .left {
              width: 60px;
              position: relative;
              padding: 4px 0;
              display: flex;
              align-items: center;
              border-radius: 5px;

              .left-status-img {
                width: 13px;
                height: 13px;
                margin: 0 2px;
                padding-bottom: 2px;
              }

              .status-icon.unstatus {
                top: 2px;
              }

              .status-hint {
                font-size: 12px;
                color: #fff;
              }
            }

            .left.live {
              background-color: #f3397a;
            }

            .left.unlive {
              background-color: #a7a7a7;
            }

            .left.playback {
              background-color: #31a5e6;
            }

            .right {
              padding: 4px 4px;
              font-size: 12px;
              color: #fff;
              background: rgba(87, 87, 87, 0.8);
              border-radius: 5px;
              flex-shrink: 0;
            }
          }
        }

        .course_con {
          padding: 0 5px;

          .course_con_title {
            margin-top: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .course_con_bottom {
            margin-top: 5px;
            display: flex;
            color: #616161;
            align-items: flex-end;

            span:nth-child(1) {
              font-size: 12px;
            }

            span:nth-child(2) {
              font-size: 16px;
              color: #f74040;
            }

            span:nth-child(3) {
              border-radius: 10px;
              margin-left: auto;
              border: 1px solid #c6aa88;
              color: #c6aa88;
              width: 63px;
              height: 24px;
              line-height: 24px;
              text-align: center;
              font-size: 12px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .editRightList {
    width: 400px;
    position: absolute;
    left: 105%;
    top: 0;
    padding: 10px;
    border: 1px solid #e1e1e1;
    background-color: #fafafa;

    .title {
      font-size: 14px;
      padding: 8px;
      border-bottom: 1px solid #e1e1e1;

      .help-text {
        font-size: 12px;
        color: #616161;
        margin-top: 5px;
      }
    }

    .editCon {
      background-color: #fff;
      padding: 10px 5px;
      border: 1px solid #e1e1e1;
      margin-top: 5px;
    }
  }
</style>
